import {Button, Layout, Tour} from 'antd';
import MyMenu from "../../components/MyMenu/index.jsx";
import {MenuFoldOutlined, MenuUnfoldOutlined} from "@ant-design/icons";
import {useEffect, useRef, useState} from "react";
import MyHeader from "../../components/MyHeader/index.jsx";
import {Outlet, useNavigate} from "react-router-dom";
import step1P from '../../../public/images/step1.png'

const {Header, Footer, Sider, Content} = Layout;

const headerStyle = {
    textAlign: 'center',
    color: '#fff',
    height: 64,
    paddingInline: 48,
    lineHeight: '64px',
    background: 'linear-gradient(252deg,#f02fc2,#6094ea)',
};
const contentStyle = {
    textAlign: 'center',
    minHeight: 120,
    // lineHeight: '120px',
    color: '#fff',
    padding: 5,
    // height:'100%'
    // backgroundColor: '#0958d9',
};
const sliderStyle = {
    textAlign: 'center',
    // lineHeight: '120px',
    color: '#fff',
    backgroundColor: '#fff',
    position: 'relative'
};

const layoutStyle = {
    borderRadius: 8,
    overflow: 'hidden',
    width: '100vw',
    minHeight: '100vh',
    height: "100%",
    maxWidth: '100%',
};


const WorkPlace = () => {
    const navigate = useNavigate()
    const [collapsed, setCollapsed] = useState(false);
    const toggleCollapsed = () => {
        setCollapsed(!collapsed);
    };

    const ref1 = useRef(null);
    const ref2 = useRef(null);
    const ref3 = useRef(null);
    const [open, setOpen] = useState(false);
    const steps = [
        {
            title: '菜单栏',
            description: '可选择不同的创作模式',
            placement: 'right',
            cover: (
                <img
                    alt="菜单栏.png"
                    src={step1P}
                />
            ),
            target: () => ref1.current,
        },
        {
            title: '多种大模型',
            description: '这里可以选择不同的openAI类型哦',
            target: () => ref2.current,
        },
        {
            title: '开始创作吧',
            description: 'FusionMind结合多种技术，旨在给于您最好的体验😁',
            target: () => ref3.current,
        },
    ];

    const finishTour = () => {
        window.localStorage.setItem('isTour', 'true')
    }

    useEffect(() => {
        let isTour = window.localStorage.getItem('isTour')
        !isTour && setOpen(true)
    }, []);
    return (
        <>
            <Tour open={open} onClose={() => setOpen(false)} steps={steps} onFinish={finishTour}/>
            <Layout style={layoutStyle}>
                <Sider ref={ref1} width="200px" style={sliderStyle} collapsed={collapsed}>
                    <div className="logo" style={{width: collapsed && '50px', fontStyle: 'italic'}}
                         onClick={() => navigate('/workplace')}>
                        {collapsed ? 'FM' : 'FusionMind'}
                    </div>
                    {/* 菜单*/}
                    <MyMenu/>
                    {/*底部折叠按钮*/}
                    <Button
                        type="primary"
                        onClick={toggleCollapsed}
                        style={{
                            marginBottom: 16,
                            position: 'absolute',
                            top: '75%',
                            left: '50%',
                            transform: 'translate(-50%,-50%)'
                        }}
                    >
                        {collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>}
                    </Button>
                </Sider>

                <Layout>
                    <Header style={headerStyle}>
                        <div ref={ref2}>
                            <MyHeader/>
                        </div>

                    </Header>
                    <Content ref={ref3} style={contentStyle}>
                        <Outlet/>
                    </Content>
                    {/*<Footer style={footerStyle}>*/}
                    {/*    madeByLG*/}
                    {/*</Footer>*/}
                </Layout>
            </Layout>
        </>
    )
}

export default WorkPlace
